<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <todo-header :addTodo="addTodo" :todos="todos" />
      <div v-if="this.todos.length > 0" class="main">
        <h3 class="todo-text">您有{{ todoNum }}条待办事项</h3>
        <todo-list :todos="todos" :deleteTodo="deleteTodo" :updateTodo="updateTodo" />
        <h3 class="completed-text">已完成{{ completedNum }}条待办事项</h3>
        <completed-list :todos="todos" :deleteTodo="deleteTodo" :updateTodo="updateTodo" />
      </div>
      <div v-else class="no-todos">
        <img src="./todolist.png" alt="" />
        <span>您暂时没有任何待办事项</span>
      </div>
    </div>
    <todo-footer
      class="todo-footer"
      v-show="todos.length > 0"
      :todos="todos"
      :deleteAll="deleteAll"
      :deleteCompleteTodos="deleteCompleteTodos"
    />
  </div>
</template>

<script>
import api from "@/api"
import TodoHeader from "./TodoHeader.vue"
import TodoList from "./TodoList.vue"
import TodoFooter from "./TodoFooter.vue"
import CompletedList from "./CompletedList.vue"
export default {
  components: { TodoHeader, TodoList, TodoFooter, CompletedList },
  data() {
    return {
      todos: []
      // todos: [
      //   {title: '吃饭', complete: false},
      //   {title: '睡觉', complete: true},
      //   {title: '敲代码', complete: false}
      // ]
    }
  },
  async mounted() {
    this.getTodoList()
  },
  computed: {
    todoNum() {
      let num = 0
      this.todos.forEach((todo) => {
        if (!todo.complete) num++
      })
      return num
    },
    completedNum() {
      let num = 0
      this.todos.forEach((todo) => {
        if (todo.complete) num++
      })
      return num
    }
  },
  methods: {
    async addTodo(todo) {
      const result = await api.createTodo(todo.title)
      console.log(result)
      this.todos.push(result.data)
    },
    async deleteTodo(todoId, index) {
      await api.deleteTodo(todoId, false)
      this.todos.splice(index, 1)
    },
    async deleteAll() {
      if (confirm("确认清空所有事项吗？")) {
        while (this.todos.length > 0) {
          this.todos.pop()
        }
        await api.deleteTodo(false, false)
      }
    },
    async deleteCompleteTodos() {
      await api.deleteTodo(false, true)
      this.todos = this.todos.filter((todo) => !todo.complete)
    },
    async updateTodo(todoId, done) {
      await api.updateTodo(todoId, done)
      // this.getTodoList()
    },
    async getTodoList() {
      const todoObj = await api.getTodoList()
      this.todos = todoObj.data
    }
  }
}
</script>

<style lang="less" scoped>
.todo-container {
  width: 100%;
  position: relative;
  height: 100%;
  background-color: #fff;
}
.todo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
}
.main {
  flex: 1;
  width: 95%;
}
.todo-footer {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(220, 221, 225, 0.5);
}
h3 {
  margin-top: 20px;
  padding-bottom: 6px;
  font-size: 16px;
}
.todo-text {
  border-bottom: 2px solid rgba(255, 165, 2, 0.3);
}
.completed-text {
  border-bottom: 2px solid rgba(123, 237, 159, 0.3);
}
.no-todos {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  text-align: center;
  font-size: 18px;
}
.no-todos img {
  // margin-bottom: 20px;
  width: 200px;
}
</style>
